<template>
    <div class="nav-swiper">
        <div class="nav-swiper-main">
            <div class="swiper-t">
                <ul @mouseleave="mouseOut">
                    <!-- class="active" -->
                    <li v-for="item in FirstList" :key="item.id" @mouseenter="mouseHover(item.id)" :class='item.id == currentIndex ? "active" : ""
                    '>
                        <span>{{ item.categoryName }}</span>
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </li>

                    <div class="active-r" v-if="isShow">
                        <div class="active-r-t">
                            <h3 class="active--title">基础知识</h3>
                            <div>
                                <div>知识点：</div>
                                <ul>
                                    <li v-for="item in SecondList" :key="item.id">{{ item.categoryName }}
                                    </li>

                                </ul>
                            </div>
                        </div>

                        <div class="active-r-b">
                            <ul>
                                <li v-for='item in courseList' :key='item.id'>
                                    <img :src="item.courseCover">
                                    <div>
                                        <div class="active-course-title">{{ item.courseName }}</div>
                                        <div class="active-course-type">{{ courseTypeFn(item.courseLevel) }} ·
                                            {{ item.clicks }}人报名</div>
                                        <div class="active-course-price">免费学习</div>
                                    </div>
                                </li>



                            </ul>
                        </div>
                    </div>

                </ul>

                <div>
                    <el-carousel :interval="3000" type="card" height='343px'>
                        <el-carousel-item v-for="item in sliderList" :key="item.id">
                            <img :src="item.imageUrl" style='height:373px'>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>

            <div class="swiper-b">
                <li>
                    <h3>
                        <img src="@/assets/img/chuji.png" alt="">
                    </h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3>
                        <img src="@/assets/img/chuji.png" alt="">
                    </h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3>
                        <img src="@/assets/img/chuji.png" alt="">
                    </h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3>
                        <img src="@/assets/img/chuji.png" alt="">
                    </h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
                <li>
                    <h3>
                        <img src="@/assets/img/chuji.png" alt="">
                    </h3>
                    <div>
                        <h4>初级课程</h4>
                        <span>入门快,岗位多</span>
                    </div>
                </li>
            </div>

        </div>
    </div>
</template>

<script setup>
// element
import { ArrowRight } from '@element-plus/icons-vue'

import { getSliders } from '@/utils/api/slider'
import { getFirstCategorys } from '@/utils/api/Course'
import { getSecondCategorys } from '@/utils/api/Course'
import { courseSearch } from '@/utils/api/Course'



import { onBeforeMount } from 'vue';
// 引入混入（mixin）文件判断等级
import courseType from '@/mixin/CourseType'
let { courseTypeFn } = courseType();


// 创建proxy数据对象 接收（响应的）
let sliderList = ref([]);

let FirstList = ref([]);

// 二级分类数据
let SecondList = ref([]);

// 数据切换
let isShow = ref(false);

// 课程数据
let courseList = ref([]);

// 控制li显示类样式 
let currentIndex = ref('');




// 此生命周期 有data，没有el(其实已经在准备了)
onBeforeMount(() => {

    // 轮播图数据
    getSliders().then(res => {
        sliderList.value = res.data.data.list
        // console.log(res)
    })

    // 获取一级分类
    getFirstCategorys().then(res => {
        FirstList.value = res.data.data.list
        // console.log(res)
    })



})


// 鼠标移入 id 为 每栏课名（HTML）对应的专属id 通过专属id 发送请求体 服务端再以请求体id返回对应的数据
const mouseHover = (id) => {

    currentIndex = id;

    isShow.value = true;

    // 获取二级分类
    getSecondCategorys({
        // 发送请求体
        categoryId: id,
    }).then(res => {
        // FirstList.value = res.data.data.list
        SecondList.value = res.data.data.list
    })

    // 获取课程
    courseSearch({
        pageNum: 1,
        pageSize: 4,
        entity: {
            firstCategory: id
        }
    }).then(res => {
        courseList.value = res.data.data.pageInfo.list;
    })

}

// 鼠标移出

const mouseOut = () => {

    currentIndex = null;

    isShow.value = false;
    // console.log(this)
}


</script>



<style scoped>
.nav-swiper {
    background: url('@/assets/img/transitionbg.png') no-repeat;
    width: 100%;
    height: 600px;
}

.nav-swiper-main {
    width: 1000px;
    padding: 47px 0;
    margin: 0 auto;
}

.swiper-t {
    display: flex;
    height: 373px;
    border-radius: 11px 11px 0px 0px;
}

.swiper-t>div {
    width: 840px;
    height: 373px;
}

.el-carousel__container {
    height: 300px;
}


.swiper-t>ul {
    position: relative;
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    justify-content: space-around;
    width: 160px;
    height: 100%;
    background: #2B283D;
    border-radius: 11px 0px 0px 0px;
}

.swiper-t>ul>li {
    display: flex;
    /* 元素中的各项周围留有空白 */
    justify-content: space-between;
    align-items: center;
    width: 120px;
    height: 37px;
    padding: 0 20px;
    font-size: 16px;
    color: #F2F2F2;
    cursor: pointer
}

.active {
    background: linear-gradient(90deg, #3FE5FF 0%, rgba(62, 222, 255, 0.93) 2%, rgba(60, 203, 255, 0.73) 9%, rgba(58, 186, 255, 0.56) 17%, rgba(57, 172, 255, 0.41) 25%, rgba(55, 160, 255, 0.28) 33%, rgba(54, 150, 255, 0.18) 43%, rgba(53, 142, 255, 0.1) 53%, rgba(53, 137, 255, 0.04) 64%, rgba(53, 133, 255, 0.01) 77%, rgba(53, 133, 255, 0) 100%);
}

.active-r {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 160px;
    z-index: 999;
    width: 724px;
    height: 373px;
    background: #FFFFFF;
    border-radius: 0px 11px 0px 0px;
}

.active-r-t {
    padding: 23px 30px;
}

.active-r-t>div {
    display: flex;
    margin-top: 11px;
}

.active-r-t>div ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: 7px;
}

.active-r-t>div ul li+li {
    margin-left: 20px;
}

.active-r-b {
    width: 724px;
    height: 217px;
    background: #F3F5F6;
}

.active-r-b>ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    padding: 0 30px;
}

.active-r-b>ul li {
    display: flex;
    width: 50%;
}

.active-r-b>ul li img {
    width: 140px;
    height: 81px;
}

.active-r-b>ul li>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
}

.active-course-title {
    font-size: 14px;
    color: #333333;
}

.active-course-type {
    font-size: 12px;
    color: #808080;
}

.active-course-price {
    font-size: 12px;
    color: #3586FF;
}

.swiper-b {
    display: flex
}

.swiper-b li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 213px;
    height: 133px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 11px;
    text-align: center;
}

.swiper-b li img {
    width: 64px;
    height: 64px;
    cursor: pointer
}

.swiper-b li div {
    margin-left: 11px;
}

.swiper-b li div h4 {
    font-size: 16px;
    color: #333333;
    cursor: pointer
}

.swiper-b li div span {
    font-size: 12px;
    color: #808080;
    cursor: pointer
}
</style>

